<template>
    <div class="revisePassword" style="border: skyblue 1px solid;border-radius:50px">
        <!--                :on-change="fileChange"
                            :on-remove="fileRemove"
                            :on-success="handleAvatarSuccess"-->

        <el-form ref="form" :model="form"  label-width="100px" :disabled="disabled">
                <!-- 头像 -->
                <el-form-item  prop="picture"  align="center">
                    <el-upload  ref="upload"
                                action="#"
                                :multiple="true"
                                :auto-upload="false"
                                :limit="1"
                                list-type="picture"  style="border-radius: 50%;margin-left: -20px;border: 1px  #d9d9d9;width:100px;height:100px">
                        <img v-if="form.picture" :src="form.picture" width="100px" height="100px" style="border-radius: 50%;margin-left: -70px">
                        <i v-else class="el-icon-plus" style="margin-top: 40px"></i>
                    </el-upload>
                </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="userName">
                        <el-input v-model="form.userName" style="width:240px" placeholder="请输入用户名称" clearable size="small" />
                    </el-form-item></el-col>
                <el-col :span="12">
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="form.phone"   style="width:240px" placeholder="请输入手机号，作为登陆凭证" clearable size="small" />
                        <span ref="checknulPhone" ></span>
                    </el-form-item></el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="所属科室" prop="deptId">
                        <el-input v-model="form.deptId" style="width:240px" placeholder="所属科室" clearable size="small" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="级别" prop="userRank">
                        <el-input v-model="form.userRank" style="width:240px" placeholder="级别" clearable size="small" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model="form.age" style="width:240px" placeholder="背景" clearable size="small" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="背景" prop="background">
                        <el-input v-model="form.background" style="width:240px" placeholder="背景" clearable size="small" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="性别" prop="sex">
                        <el-input v-model="form.sex" style="width:240px" placeholder="性别" clearable size="small" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态" prop="status">
                        <el-input v-model="form.status" style="width:240px" placeholder="性别" clearable size="small" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="是否参与排班" prop="schedulingFlag">
                        <el-input v-model="form.schedulingFlag" style="width:240px" placeholder="排班" clearable size="small" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email" style="width:240px" placeholder="请输入用户邮箱" clearable size="small" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22">
                    <el-form-item label="擅长" prop="strong">
                        <el-input v-model="form.strong" type="textarea" placeholder="请输入用户擅长" />
                    </el-form-item>
                </el-col>
                <el-col :span="22">
                    <el-form-item label="荣誉" prop="honor">
                        <el-input v-model="form.honor" type="textarea" placeholder="请输入用户相关荣誉" />
                    </el-form-item>
                </el-col>
                <el-col :span="22">
                    <el-form-item label="简介" prop="introduction" >
                        <el-input v-model="form.introduction" type="textarea" placeholder="请输入用户简介" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "PersonCenter",
        data(){
            return{
                disabled:true,
                form:{},
                //系统状态
                statusOptions:[],
                //背景字典
                backgroundOptions:[],
                //级别字典
                levelOptions:[],
                //性别字典
                sexOptions:[],
                //排班字典
                schedulingOptions:[],
            }
        },
        created() {
            this.initUserInfo();
            this.initStatus();
            this.initBackground();
            this.initSex();
            this.initLevel();
            this.initScheduling();
            this.initDept();       //加载部门条件模糊查询
        },
        methods:{
            initUserInfo(){  //初始化用户信息
                this.$http.get("/system/api/user/info").then(result=>{
                    this.form = result.data.data;
                })
            },
            initStatus(){ //初始化状态字典
                this.$http.get("/system/api/dict/data/findByType/sys_normal_disable").then(result=>{
                    this.statusOptions = result.data.data;
                    // console.log(JSON.stringify(this.statusOptions));
                    let v = this.form.status;
                    for (let i=0;i<this.statusOptions.length;i++){
                        if (this.statusOptions[i].dictValue==v){
                            this.form.status = this.statusOptions[i].dictLabel;
                            break;
                        }
                    }
                    return "";
                })
            },
            initBackground(){ //初始化背景字典
                this.$http.get("/system/api/dict/data/findByType/sys_user_background").then(result=>{
                    this.backgroundOptions = result.data.data;
                    let v = this.form.background;
                    for (let i=0;i<this.backgroundOptions.length;i++){
                        if (this.backgroundOptions[i].dictValue==v){
                            this.form.background = this.backgroundOptions[i].dictLabel;
                            break;
                        }
                    }
                    return "";
                })
            },
            initSex(){ //初始化性别字典
                this.$http.get("/system/api/dict/data/findByType/sys_user_sex").then(result=>{
                    this.sexOptions = result.data.data;
                    let v = this.form.sex;
                    for (let i=0;i<this.sexOptions.length;i++){
                        if (this.sexOptions[i].dictValue==v){
                            this.form.sex = this.sexOptions[i].dictLabel;
                            break;
                        }
                    }
                    return "";
                })
            },
            initLevel(){ //初始化级别字典
                this.$http.get("/system/api/dict/data/findByType/sys_user_level").then(result=>{
                    this.levelOptions = result.data.data;
                    let v = this.form.userRank;
                    for (let i=0;i<this.levelOptions.length;i++){
                        if (this.levelOptions[i].dictValue==v){
                            this.form.userRank = this.levelOptions[i].dictLabel;
                            break;
                        }
                    }
                    return "";
                })
            },
            initScheduling(){ //初始化排班字典
                this.$http.get("/system/api/dict/data/findByType/sys_yes_no").then(result=>{
                    this.schedulingOptions = result.data.data;
                    let v = this.form.schedulingFlag;
                    for (let i=0;i<this.schedulingOptions.length;i++){
                        if (this.schedulingOptions[i].dictValue==(v==0?'Y':'N')){
                            this.form.schedulingFlag = this.schedulingOptions[i].dictLabel;
                            break;
                        }
                    }
                    return "";
                })
            },
            initDept(){ //查询部门信息
                this.$http.get("/system/api/dept/list").then(result=>{
                    this.deptOptions = result.data.data;
                    let v = this.form.deptId;
                    for (let i=0;i<this.deptOptions.length;i++){
                        if (this.deptOptions[i].deptId==v){
                            this.form.deptId = this.deptOptions[i].deptName;
                            break;
                        }
                    }
                    return "";
                })
            },
        }
    }
</script>

<style scoped>
    .revisePassword {
        max-width: 800px;
        margin: 0 auto;
        padding: 40px 20px;
    }
</style>
